<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 960px;
			margin: 20px auto;
		}

		#cart {
			margin: 0 auto;
			width: 850px;
		}

		#cart-header {
			height: 40px;
			background-color: lightgray;
			margin-bottom: 20px;
		}

		#cart-header div {
			line-height: 40px;
		}

		.left {
			float: left;
		}

		.right {
			float: right;
		}

		.w110 {
			width: 100px;
		}

		.ml10 {
			margin-left: 10px;
		}

		.w120 {
			width: 120px;
		}

		.w250 {
			width: 250px;
		}

		.center {
			text-align: center;
		}

		.w20 {
			width: 20px;
		}

		.w90 {
			width: 90px;
		}

		.clear {
			clear: both;
		}

		#cart-items>div {
			height: 100px;
		}

		#cart-items>div>div {
			line-height: 100px;
		}

		.w250 span {
			display: inline-block;
			font-size: 12px;
			line-height: 16px !important;
		}

		.single-item {
			border-bottom: 1px solid gray;
		}

		.small-button {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: none;
		}

		.big-button {
			color: white;
			background-color: red;
			display: inline-block;
			width: 120px;
			height: 40px;
			border: none;
			font-size: 22px;
		}

		#totalCount,
		#totalPrice {
			color: red;
		}

		#totalPrice {
			font: bolder 20px Arial;
			display: inline-block;
			width: 150px;
		}

		#cart a {
			text-decoration: none;
		}

		#cart a:link,
		#cart a:visited,
		#cart a:active {
			color: gray;
		}
	</style>
</head>

<body>
	<div id="cart">
		<div id="cart-header">
			<div class="left w110 ml10">
				<input class="selectAll" type="checkbox">
				<label for="selectAll">全选</label>
			</div>
			<div class="left w250">商品</div>
			<div class="left w120 center">单价</div>
			<div class="left w120 center">数量</div>
			<div class="left w120 center">小计</div>
			<div class="left w120 center">操作</div>
		</div>
		<div id="cart-items">
			<div class="clear single-item" id='c'>
				<div class="left w20 ml10">
					<input class="selectOne" type="checkbox">
				</div>
				<div class="left w90">
					<a href="">
						<img src="img/a1.jpg">
					</a>
				</div>
				<div class="left w250">
					<span>
						海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
					</span>
				</div>
				<div class="left w120 center">&yen;<span class="price">138.00</span></div>
				<div class="left w120 center">
					<button class="small-button de">-</button>
					<input class="center count" type="text" size="3" value="1" id='in'>
					<button class="small-button pl">+</button>
				</div>
				<div class="left w120 center">&yen;<span class="tot">138.00</span></div>
				<div class="left w120 center">
					<a href="javascript:void(0);" class="del">删除</a>
				</div>
			</div>
			<div class="clear single-item" id='c'>
				<div class="left w20 ml10">
					<input class="selectOne" type="checkbox">
				</div>
				<div class="left w90">
					<a href="">
						<img src="img/a1.jpg">
					</a>
				</div>
				<div class="left w250">
					<span>
						海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
					</span>
				</div>
				<div class="left w120 center">&yen;<span class="price">138.00</span></div>
				<div class="left w120 center">
					<button class="small-button de">-</button>
					<input class="center count" type="text" size="3" value="1" id='in'>
					<button class="small-button pl">+</button>
				</div>
				<div class="left w120 center">&yen;<span class="tot">138.00</span></div>
				<div class="left w120 center">
					<a href="javascript:void(0);" class="del">删除</a>
				</div>
			</div>
			<div class="clear single-item" id='c'>
				<div class="left w20 ml10">
					<input class="selectOne" type="checkbox">
				</div>
				<div class="left w90">
					<a href="">
						<img src="img/a2.jpg">
					</a>
				</div>
				<div class="left w250">
					<span>
						HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
					</span>
				</div>
				<div class="left w120 center">&yen;<span class="price">128.00</span></div>
				<div class="left w120 center">
					<button class="small-button de">-</button>
					<input class="center count" type="text" size="3" value="1" id='in'>
					<button class="small-button pl">+</button>
				</div>
				<div class="left w120 center">&yen;<span class="tot">128.00</span></div>
				<div class="left w120 center">
					<a href="javascript:void(0);" class="del">删除</a>
				</div>
			</div>
			<div class="clear single-item" id='c'>
				<div class="left w20 ml10">
					<input class="selectOne" type="checkbox">
				</div>
				<div class="left w90">
					<a href="">
						<img src="img/a3.jpg">
					</a>
				</div>
				<div class="left w250">
					<span>
						HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
					</span>
				</div>
				<div class="left w120 center">&yen;<span class="price">99.00</span></div>
				<div class="left w120 center">
					<button class="small-button de">-</button>
					<input class="center count" type="text" size="3" value="1" id='in'>
					<button class="small-button pl">+</button>
				</div>
				<div class="left w120 center">&yen;<span class="tot">99.00</span></div>
				<div class="left w120 center">
					<a href="javascript:void(0);" class="del">删除</a>
				</div>
			</div>
		</div>
		<div id="cart-footer">
			<div class="clear left">
				<a class="clearSelected" href="javascript:void(0);">删除选中商品</a>
			</div>
			<div class="right">
				<span>总共选中了<span id="totalCount">0</span>件商品</span>
				<span>总计: <span id="totalPrice">&yen;0.00</span></span>
				<button id="pay" class="big-button">去结算</button>
			</div>
		</div>
	</div>

	<script>

		var selectAll = document.querySelector('.selectAll'),
			selectOne = document.querySelectorAll('.selectOne'),
			de = document.querySelectorAll('.de'),
			pl = document.querySelectorAll('.pl'),
			count = document.querySelectorAll('.count'),
			tot = document.querySelectorAll('.tot'),
			del = document.querySelectorAll('.del'),
			totalCount = document.querySelector('#totalCount'),
			totprice = document.querySelector('#totalPrice'),
			clearSelected = document.querySelector('clearSelected'),
			cart = document.querySelector('#cart');

		var clear = document.querySelectorAll('#c')
		console.log(clear)

		var sum = 0, n = 0, count = 0, sum2 = 0;


		//求总价
		function pricesum() {
			sum = 0;
			Array.from(selectOne).forEach(function (item) {
				var div = item.parentNode.parentNode;
				if (item.checked) {
					sum += div.children[3].children[0].innerHTML *
						div.children[4].children[1].value;
				}
				totprice.innerHTML = '&yen;' + sum.toFixed(2);
			})
		}

		//求总数
		function countnum() {
			count = 0;
			Array.from(selectOne).forEach(function (item) {
				var div = item.parentNode.parentNode;
				if (item.checked) {
					count += Number(div.children[4].children[1].value);
					/*if (clear.length === 0)
						count = 0;*/

					//console.log(clear.length)
				}
				totalCount.innerHTML = count;
			})
		}


		//事件委托
		cart.onclick = function (e) {
			e = e || event;
			var target = e.target || e.srcElement;
			var div = target.parentNode.parentNode;
			//console.log(div)

			switch (target.className) {
				case 'selectOne':
					Array.from(selectOne).forEach(function (item) {
						item.onchange = function () {
							this.checked ? n++ : n--;

							selectAll.checked = n === selectOne.length ? true : false;

							pricesum();
							countnum();
							console.log('n:' + n)
							console.log('selectOne.length' + selectOne.length)


						}
					})
					break;

				case 'selectAll':
					selectAll.onchange = function () {
						Array.from(selectOne).forEach(function (item) {
							item.checked = selectAll.checked;
						})
						pricesum();
						countnum();
						n = selectAll.checked ? selectOne.length : 0;

					}
					break;


				case 'del':
					if (confirm('确定要删除吗？')) {

						div.remove();
						//更新单选按钮节点
						selectOne = document.querySelectorAll('.selectOne')
						clear = document.querySelectorAll('#c')
						/*console.log('n:' + n)
						console.log('selectOne.length:' + selectOne.length)*/
					}
					if (div.children[0].children[0].checked) {
						n--;
						/*console.log('n:' + n)
						console.log('selectOne.length:' + selectOne.length)*/
						pricesum();
						countnum();
						if (clear.length === 0) {
							sum = 0;
							count = 0;
							totprice.innerHTML = '&yen;' + sum.toFixed(2);
							totalCount.innerHTML = count;
						}
					}
					selectAll.checked = n === selectOne.length ? true : false;
					break;

				case 'small-button de':
					div.children[4].children[1].value--;
					if (div.children[4].children[1].value < 0) {
						div.children[4].children[1].value = 0;
					}
					sum2 = div.children[3].children[0].innerHTML *
						div.children[4].children[1].value;
					div.children[5].children[0].innerHTML = sum2.toFixed(2);
					
					countnum()
					pricesum()
					break;

				case 'small-button pl':
					div.children[4].children[1].value++;
					sum2 = div.children[3].children[0].innerHTML *
						div.children[4].children[1].value;

					div.children[5].children[0].innerHTML = sum2.toFixed(2);
					
					countnum()
					pricesum()
					break;

				case 'clearSelected':
					if (confirm('确定要删除吗？')) {
						Array.from(clear).forEach(function (item) {
							if (item.children[0].children[0].checked) {
								item.remove();
								n--;
								selectOne = document.querySelectorAll('.selectOne')
								clear = document.querySelectorAll('#c')
								countnum();
								pricesum();
								if (clear.length === 0) {
									sum = 0;
									count = 0;
									totprice.innerHTML = '&yen;' + sum.toFixed(2);
									totalCount.innerHTML = count;
								}
							}
						})
					}
					console.log(clear.length)
					break;


			}
		}
		var s = document.querySelectorAll('#in')


		Array.from(s).forEach(function () {
			document.onkeydown = function () {
				countnum()
				pricesum()

			}
		})





	</script>




</body>

</html>